<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大模型师生助手 - 学生端</title>
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/studentview.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../static/css/studentstyle.css">
    <!-- 引入 Quill 富文本编辑器的 CSS -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        /* 确保主容器和内容区域有明确的高度 */
        .main-container {
            display: flex;
            height: calc(100vh - 60px); /* 减去头部高度 */
        }

        .content {
            flex: 1;
            height: 100%;
            overflow: hidden; /* 防止内容溢出导致的外部滚动条 */
        }

        .content-box {
            height: 100%;
            display: none; /* 默认隐藏所有内容盒子 */
        }

        .content-box.active {
            display: block; /* 只显示激活的内容盒子 */
        }

        /* 聊天和考试窗口样式优化 - 确保占满空间 */
        .content-box.chat,
        .content-box.exam {
            padding: 0; /* 移除内边距，避免iframe周围出现空白 */
            height: 100%; /* 强制占满父容器高度 */
        }

        .chat-iframe, .exam-iframe {
            width: 100%;
            height: 100% !important; /* 强制完全填满父容器 */
            min-height: 600px; /* 确保最小高度，避免内容过少时过小 */
            border: none; /* 使用CSS移除边框 */
            overflow: auto; /* 按需显示滚动条 */
            display: block; /* 消除inline元素默认的底部间隙 */
        }
             /* 用户名样式 */
         .user-menu {
             position: relative;
             display: inline-block;
         }
        .username {
            cursor: pointer;
            color: #333;
            font-weight: bold;
            padding: 8px 12px;
            border-radius: 4px;
            background-color: #f5f5f5;
        }
        .username:hover {
            background-color: #e0e0e0;
        }

        /* 弹窗样式 */
        .user-modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background-color: white;
            width: 400px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .modal-header {
            padding: 16px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-header h3 {
            margin: 0;
        }
        .close-modal {
            cursor: pointer;
            font-size: 20px;
            color: #999;
        }
        .close-modal:hover {
            color: #333;
        }
        .modal-body {
            padding: 20px;
        }
        .modal-body .loading {
            text-align: center;
            color: #666;
            padding: 20px 0;
        }
        .modal-footer {
            padding: 16px;
            border-top: 1px solid #eee;
            text-align: right;
        }
        .logout-btn {
            padding: 8px 16px;
            background-color: #ff4d4f;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .logout-btn:hover {
            background-color: #f5222d;
        }

        /* 个人信息项样式 */
        .info-item {
            margin-bottom: 12px;
        }
        .info-item strong {
            display: inline-block;
            width: 100px;
            color: #666;
        }


        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal.show {
            display: flex;
        }

        .modal-content {
            background-color: white;
            border-radius: 8px;
            width: 600px;
            max-width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .modal-header {
            padding: 16px 24px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h3 {
            margin: 0;
            font-size: 1.25rem;
            color: #1e293b;
        }

        .close-modal {
            background: none;
            border: none;
            font-size: 1.25rem;
            cursor: pointer;
            color: #64748b;
            transition: all 0.2s ease;
        }

        .close-modal:hover {
            color: #ef4444;
        }

        .modal-form {
            padding: 24px;
        }

        .form-row {
            margin-bottom: 16px;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #1e293b;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
        }

        /* 富文本编辑器样式 */
        .ql-toolbar {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-color: #e2e8f0 !important;
        }

        .ql-container {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            border-color: #e2e8f0 !important;
            font-family: inherit;
        }

        .ql-editor {
            min-height: 200px;
            font-size: 14px;
        }

        /* Add these styles to the existing style section */
        .action-buttons {
            display: flex;
            gap: 5px;
        }

        .btn.icon {
            width: 32px;
            height: 32px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn.icon.generate {
            background-color: #6f42c1;
            color: white;
        }

        .btn.icon.generate:hover {
            background-color: #5a32a3;
        }

        .center-text {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="student-management-page">
    <header class="main-header">
        <div class="logo">
            <i class="fas fa-graduation-cap"></i>
            <h1>大模型师生助手</h1>
        </div>
        <div class="user-menu">
            <!-- 用户名显示区域（点击触发弹窗） -->
            <span class="username" id="username">加载中...</span>
        </div>

        <!-- 个人信息弹窗（默认隐藏） -->
        <div class="user-modal" id="userModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>个人信息</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body" id="userInfo">
                    <!-- 个人信息将通过AJAX动态加载 -->
                    <div class="loading">加载中...</div>
                </div>
                <div class="modal-footer">
                    <button class="logout-btn" id="logoutBtn">退出登录</button>
                </div>
            </div>
        </div>
    </header>

    <div class="main-container">
        <aside class="sidebar">
            <nav class="sidebar-nav">
                <ul>
                    <li class="active noteRa" index="note"><a href="#"><i class="fas fa-users"></i> <span>上课笔记</span></a></li>
                    <li class="errorRa" index="error"><a href="#"><i class="fas fa-chalkboard-teacher"></i> <span>错题本</span></a></li>
                    <li class="chatRa" index="chat"><a href="#"><i class="fas fa-book"></i> <span>聊天</span></a></li>
                    <li class="examRa" index="exam"><a href="#"><i class="fas fa-file-alt"></i> <span>考试</span></a></li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <!-- 上课笔记盒子（默认显示） -->
            <div class="content-box active note" id="note-box">
                <div class="content-header">
                    <h2>上课笔记</h2>
                    <button id="add-note" class="btn primary addNote">
                        <i class="fas fa-plus"></i> 添加笔记
                    </button>
                </div>
                <div class="filter-bar">
                    <div class="search-boxes">
                        <div class="search-box">
                            <input type="text" placeholder="搜索笔记名称..." class="search-input" id="search-note-name">
                            <button class="search-btn" id="search-note-btn"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <table class="data-table noteContentBox">
                        <thead>
                        <tr>
                            <th>笔记名称</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 动态填充数据 -->
                        </tbody>
                    </table>
                </div>
                <div class="pagination notePageBox">
                    <!-- 动态生成分页 -->
                </div>
                <div class="explain-text" style="text-align: center; margin-top: 8px; color: #999;">
                    提示：搜索后点击左侧"上课笔记"可实现重置。
                </div>
            </div>

            <div class="content-box error" id="error-box">
                <iframe src="errornote" class="chat-iframe" scrolling="auto"></iframe>
            </div>

            <div class="content-box chat" id="chat-box">
                <!-- 用iframe嵌入chatroom.html -->
                <iframe src="chatroom" class="chat-iframe" scrolling="auto"></iframe>
            </div>

            <!-- 新增考试盒子 -->
            <div class="content-box exam" id="exam-box">
                <!-- 用iframe嵌入考试页面 -->
                <iframe src="/LLMTchStd/examsystem" class="exam-iframe" scrolling="auto"></iframe>
            </div>
        </main>
    </div>

    <!-- 添加笔记弹窗 -->
    <div id="add-note-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加笔记</h3>
                <button class="close-modal" id="close-add-note-modal"><i class="fas fa-times"></i></button>
            </div>

            <form class="modal-form" id="add-note-form">
                <div class="form-row">
                    <div class="form-group">
                        <input type="text" id="add-note-name" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <div id="add-note-editor" style="height: 300px;"></div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn secondary" id="cancel-add-note-btn">取消</button>
                    <button type="submit" class="btn primary">确认</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 修改笔记弹窗 -->
    <div id="update-note-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>修改笔记</h3>
                <button class="close-modal" id="close-update-note-modal"><i class="fas fa-times"></i></button>
            </div>

            <form class="modal-form" id="update-note-form">
                <input type="hidden" id="update-note-id">
                <div class="form-row">
                    <div class="form-group">
                        <input type="text" id="update-note-name" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <div id="update-note-editor" style="height: 300px;"></div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn secondary" id="cancel-update-note-btn">取消</button>
                    <button type="submit" class="btn primary">确认</button>
                </div>
            </form>
        </div>
    </div>

</div>>

<!-- Add this modal dialog to studentview.html, near the other modals -->
<!-- Generate Exam from Note Modal -->
<div id="generate-exam-from-note-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>从笔记生成试卷</h3>
            <button class="close-modal" id="close-generate-exam-from-note-modal">&times;</button>
        </div>
        <form class="modal-form" id="generate-exam-from-note-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="note-choice-count">选择题数量</label>
                    <input type="number" id="note-choice-count" min="0" value="5">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="note-fill-count">填空题数量</label>
                    <input type="number" id="note-fill-count" min="0" value="5">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="note-judge-count">判断题数量</label>
                    <input type="number" id="note-judge-count" min="0" value="5">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="note-essay-count">简答题数量</label>
                    <input type="number" id="note-essay-count" min="0" value="2">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="note-calculate-count">计算题数量</label>
                    <input type="number" id="note-calculate-count" min="0" value="2">
                </div>
            </div>
            <div class="form-group">
                <label>考试开始时间：</label>
                <input type="datetime-local" id="note-release-time" required>
            </div>

            <!-- 新增：考试时长（分钟） -->
            <div class="form-group">
                <label>考试时长（分钟）：</label>
                <input type="number" id="note-exam-duration" min="1" value="60" required>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="note-exam-remark">备注</label>
                    <textarea id="note-exam-remark" rows="3" placeholder="可输入考卷难度、重点考察内容等备注信息"></textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn secondary" id="cancel-generate-exam-from-note-btn">取消</button>
                <button type="button" class="btn primary" id="confirm-generate-exam-from-note">
                    <i class="fas fa-magic"></i> 生成考卷
                </button>
            </div>
        </form>
    </div>
</div>


<!-- 引入 Quill 富文本编辑器的 JavaScript -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
</body>
</html>